<!DOCTYPE html>

<!-- *********************************************************************************************

How to Create CSS3 Accordion Menu [Tutorial]
"How to Create CSS3 Accordion Menu" that was specially made for DesignModo by our friend Valeriu Timbuc. 

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com/futurico
http://vladimirkudinov.com
http://rockablethemes.com

********************************************************************************************* -->

<html lang="en">

<head>

	<meta charset="utf-8" />

	<title>CSS3 Accordion Menu</title>

	<link rel="stylesheet" href="css/accordionmenu.css" type="text/css" media="screen" />
	<script type="text/javascript" src="cssrefresh.js"></script>

	<style type="text/css">body{background:url(img/bg.png) repeat;width:960px;margin:0 auto}.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial}.footer a{color:#999;text-decoration:none}#wrapper-200a{width:200px;float:left;margin-left:180px}#wrapper-200b{width:200px;float:left;margin-left:200px}#wrapper-600{clear:both;width:600px;margin-left:180px;padding-top:50px}#wrapper-200b .accordion > li:hover > a,#wrapper-200b .accordion > li:target > a {background:url(img/active.png) repeat-x}</style>
<meta name="robots" content="noindex,follow" />
</head>

<body>

	<img src="img/title.png" alt="">

	<div id="wrapper-200a">

		<ul class="accordion">
			
			<li id="one" class="files">

				<a href="#one">My Files<span>495</span></a>

				<ul class="sub-menu">
					
					<li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li>
					
					<li><a href="#one"><em>02</em>Skydrive<span>87</span></a></li>

					<li><a href="#one"><em>03</em>FTP Server<span>366</span></a></li>

				</ul>

			</li>
			
			<li id="two" class="mail">

				<a href="#two">Mail<span>26</span></a>

				<ul class="sub-menu">
					
					<li><a href="#two"><em>01</em>Hotmail<span>9</span></a></li>
					
					<li><a href="#two"><em>02</em>Yahoo<span>14</span></a></li>

					<li><a href="#two"><em>03</em>Gmail<span>3</span></a></li>

				</ul>

			</li>
			
			<li id="three" class="cloud">

				<a href="#three">Cloud<span>58</span></a>

				<ul class="sub-menu">
					
					<li><a href="#three"><em>01</em>Connect<span>12</span></a></li>
					
					<li><a href="#three"><em>02</em>Profiles<span>19</span></a></li>

					<li><a href="#three"><em>03</em>Options<span>27</span></a></li>

				</ul>

			</li>
			
			<li id="four" class="sign">

				<a href="#four">Sign Out</a>

				<ul class="sub-menu">
					
					<li><a href="#four"><em>01</em>Log Out</a></li>
					
					<li><a href="#four"><em>02</em>Delete Account</a></li>

					<li><a href="#four"><em>03</em>Freeze Account</a></li>

				</ul>

			</li>
		
		</ul>
		
	</div>

	<div id="wrapper-200b">

		<ul class="accordion">
			
			<li id="one2" class="files">

				<a href="#one2">My Files<span>495</span></a>

				<ul class="sub-menu">
					
					<li><a href="#one2"><em>01</em>Dropbox<span>42</span></a></li>
					
					<li><a href="#one2"><em>02</em>Skydrive<span>87</span></a></li>

					<li><a href="#one2"><em>03</em>FTP Server<span>366</span></a></li>

				</ul>

			</li>
			
			<li id="two2" class="mail">

				<a href="#two2">Mail<span>26</span></a>

				<ul class="sub-menu">
					
					<li><a href="#two2"><em>01</em>Hotmail<span>9</span></a></li>
					
					<li><a href="#two2"><em>02</em>Yahoo<span>14</span></a></li>

					<li><a href="#two2"><em>03</em>Gmail<span>3</span></a></li>

				</ul>

			</li>
			
			<li id="three2" class="cloud">

				<a href="#three2">Cloud<span>58</span></a>

				<ul class="sub-menu">
					
					<li><a href="#three2"><em>01</em>Connect<span>12</span></a></li>
					
					<li><a href="#three2"><em>02</em>Profiles<span>19</span></a></li>

					<li><a href="#three2"><em>03</em>Options<span>27</span></a></li>

				</ul>

			</li>
			
			<li id="four2" class="sign">
				
				<a href="#four2">Sign Out</a>

				<ul class="sub-menu">
					
					<li><a href="#four2"><em>01</em>Log Out</a></li>
					
					<li><a href="#four2"><em>02</em>Delete Account</a></li>

					<li><a href="#four2"><em>03</em>Freeze Account</a></li>

				</ul>

			</li>
		
		</ul>
		
	</div>

	<div id="wrapper-600">

		<ul class="accordion">
			
			<li id="one3" class="files">

				<a href="#one3">My Files<span>495</span></a>

				<ul class="sub-menu">
					
					<li><a href="#one3"><em>01</em>Dropbox<span>42</span></a></li>
					
					<li><a href="#one3"><em>02</em>Skydrive<span>87</span></a></li>

					<li><a href="#one3"><em>03</em>FTP Server<span>366</span></a></li>

				</ul>

			</li>
			
			<li id="two3" class="mail">

				<a href="#two3">Mail<span>26</span></a>

				<ul class="sub-menu">
					
					<li><a href="#two3"><em>01</em>Hotmail<span>9</span></a></li>
					
					<li><a href="#two3"><em>02</em>Yahoo<span>14</span></a></li>

					<li><a href="#two3"><em>03</em>Gmail<span>3</span></a></li>

				</ul>

			</li>
			
			<li id="three3" class="cloud">

				<a href="#three3">Cloud<span>58</span></a>

				<ul class="sub-menu">
					
					<li><a href="#three3"><em>01</em>Connect<span>12</span></a></li>
					
					<li><a href="#three3"><em>02</em>Profiles<span>19</span></a></li>

					<li><a href="#three3"><em>03</em>Options<span>27</span></a></li>

				</ul>

			</li>
			
			<li id="four3" class="sign">

				<a href="#four3">Sign Out</a>

				<ul class="sub-menu">
					
					<li><a href="#four3"><em>01</em>Log Out</a></li>
					
					<li><a href="#four3"><em>02</em>Delete Account</a></li>

					<li><a href="#four3"><em>03</em>Freeze Account</a></li>

				</ul>

			</li>
		
		</ul>
		
	</div>

	<div class="footer"><p>By <a href="http://vtimbuc.net/">Valeriu Timbuc</a> for <a href="http://designmodo.com">DesignModo</a>.</p></div>

</body>

</html>